<template>
  <div class="dice">
    <div class="dice-box">
      <div class="dice-cantainer" id="dice"></div>
    </div>

    <div class="title">{{ sex ? "男生掷" : "女生掷" }}</div>
  </div>
</template>
<script>
import { Dice } from "dice/build/index.es";
function g(id) {
  return document.getElementById(id);
}


export default {
  props: ["sex"],
  data() {
    return {
      dice: null,
    };
  },
  mounted() {
    const container = g("dice"),
      dice = new Dice({
        element: container,
        modlePath: "/dice/dice.glb",
        diceScale: 13,
        diceColor: 0xff0000,
        cameraPosition: [20, 26, 10],
      });

    dice.onLoaded(() => {
      dice.renderer.setClearAlpha(0);
    });
    dice.on((number) => {
      this.$emit("change", number);
    });
  },
};
</script>
<style lang="scss">
.dice {
  width: 100%;
  height: 100%;
  position: relative;
  .dice-cantainer,
  .dice-box {
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    border: 1px solid #ffffff00;
    border-radius: 50%;

    .dice_wrapper {
      //   top: 54% !important;
      left: 53% !important;
    }
  }
  .dice-cantainer {
    transform: scale(0.6);
    box-shadow: inset 0 0 7px 0px gainsboro;
  }
  .title {
    position: absolute;
    font-size: 14px;
    bottom: -18px;
    text-wrap: nowrap;
    background-color: #8854f6;
    border-radius: 10px;
    padding: 0 10px;
    color: white;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
